<template>
  <div class="doctor-container">
    <van-nav-bar
      class="app-nav-bar"
      :title="depname"
      left-arrow
      @click-left="$router.back()"
    />
    <van-tabs @click="handleClick">
      <van-tab title="全部日期"></van-tab>
      <van-tab v-for="item in dateList"  :title="item.value">
      </van-tab>
    </van-tabs>
    <van-cell-group>
      <van-cell v-for="item in docList" :key="item.id+''">
        <van-row>
          <van-col span="5">
            <van-image
              width="60"
              height="60"
              :src="item.imageUrl"
            />
          </van-col>
          <van-col class="div-info-wrapper" span="14">
            <div class="doc-name">{{item.username}} {{item.professionalTitle}}</div>
            <div class="expertise van-ellipsis">{{item.expertise}}</div>
            <div class="doc-comment">
              <span class="numberOfPositiveComment">好评数{{item.params.numberOfPositiveComment}}</span>
              <span>接诊量{{item.params.numberOfVisitsReceived}}</span>
            </div>
          </van-col>
          <van-col span="5" class="order-btn-wrapper">
            <van-button class="order-btn" round size="small" @click="clickOrder(item.id)" block type="info">预约</van-button>
          </van-col>
        </van-row>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import docApi from '@/api/doctor'
import scheApi from '@/api/schedule'
export default {
  name: "DoctorIndex",
  data(){
    return{
      depcode:'',
      docList:[],
      dateList:[],
      depname:'',
      searchObj:{}
    }
  },
  created() {
    this.init()
  },
  methods:{
    //点击日期
    async handleClick(index,title){
      if (index==0){//说明查询全部
        await this.getRecentDocList(this.depcode)
      }
      //根据对应日期和编号查询对应的医生列表
      this.searchObj.workDate = this.dateList[index-1].key
      //进行查询
      const{data:res} = await scheApi.find(this.searchObj)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.docList = res.data
    },
    init(){
      //获取跳转路由中的科室编号
      this.depcode = this.$route.query.depcode
      this.depname = this.$route.query.depname
      this.searchObj.depcode = this.depcode
      //查询医生列表
      this.getRecentDocList(this.depcode)
      //获取14天的日期
      this.get14Day()
    },
    //根据科室编号和最近的排班日期查询医生列表
    async getRecentDocList(depcode){
      const{data:res} = await scheApi.getRecently(depcode)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.docList = res.data
    },
    //获取14天的日期
    async get14Day(){
      const{data:res} = await scheApi.get14Day()
      if (res.code!==200){
        return this.$notify({type:'danger',message:'获取失败'})
      }
      this.dateList = res.data
      // this.dateList = res.data
    },
    //点击预约，跳转到医生页面
    async clickOrder(id){
      await this.$router.push({path: '/doctor/detail', query: {id: id,depname:this.depname}})
    }
  }
}
</script>

<style lang="less" scoped>
.div-info-wrapper{
  .doctor-name{
    font-size: 15px;
  }
  .expertise,.doc-comment{
    font-size: 12px;
    line-height: 20px;
    .numberOfPositiveComment::after{
      content: '  ';
      white-space: pre;
    }
  }
  .order-btn-wrapper{

  }
}
</style>
